<template>
    <div class="slider">


        <!--        Logo 卡片-->
        <div class="logoCard">
            <el-card class="box-card" shadow="hover" style="text-align: center">
                <el-image
                        class="logoImage"
                        style="width: 100px; height: 100px"
                        :src="this.$store.state.user==null?require('@/assets/logo.jpg'):this.$store.state.user.headImage"
                        fit="fit"></el-image>
                <h1>{{this.$store.state.user == null? 'Cofa': this.$store.state.user.username}}</h1>
            </el-card>
        </div>


        <!--        标签 卡片-->

        <div class="tagsCard">
            <el-card class="box-card" shadow="hover" style="text-align: center">
                <h4>标签云</h4>

                <!--                                标签卡片-->
                <div class="tagsPart" >

                    <el-tag v-for="(item,index) in tagsList" :key="index" @click="toArticleListByTagsId(item.id)"
                            :type="tagsStyle[index % tagsStyle.length]">
                        {{item.tagsName}}
                    </el-tag>
                </div>

            </el-card>
        </div>

    </div>
</template>

<script>
    import https from "../../https";

    export default {
        name: "slider",
        data() {
            return {
                tagsList: [],
                tagsStyle: ['success', 'info', 'warning', 'danger'],
            }
        },
        mounted: function () {
            this.getTags()
        },
        methods: {

            /**
             * 获取标签云数据
             */
            getTags() {

                https.fetchGet('/tags/list', null).then((res) => {


                    if (res.data.code == 200) {

                        // 更新数据
                        this.tagsList = res.data.data
                    }
                }).catch((err) => {
                    console.log(err);
                })

            },

            /**
             * 跳转到文章详情页
             * @param articleId
             */
            toArticleListByTagsId(tagsId){
                console.log(tagsId)
                this.$router.push({
                    path: `/tags/${tagsId}`
                })
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .logoSlider {
        height: 300px;
        margin: auto;
        width: 100%;
    }

    .logoImage {
        border-radius: 50%;
        animation: mylogo-data-v-d43010d6 3s;
        animation-iteration-count: infinite;
        margin: auto;
    }

    .tagItem {
        display: inline-block;
        cursor: pointer;
        padding: 5px 5px;
        border-radius: 5px;
        background-color: #eee;
        color: #333;
        margin: 10px 10px 0 0;
        text-decoration: none;
    }

    .tagItem:hover {
        color: #409eff;
    }

    .tagsPart .el-tag {
        margin: 5px 8px
    }

</style>
